<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>举报管理页面</title>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/bootstrap/bootstrap-theme.min.css">
    <script src="/bootstrap/jquery-1.11.0.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/bootstrap/bootstrap.min.js"></script>
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="../js/include.js"></script>

</head>
<style type="text/css">
    html, body {
        overflow: auto;
        height: 100%;
    }

    .line-limit-length {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


</style>
<script>

</script>
<body>
<div id="app">
    <div class="hrms_dept_container">
        <!-- 导航栏-->
        <div id="header"></div>


        <!-- 中间部分（左侧栏+表格内容） -->
        <div class="hrms_dept_body">
            <!-- 左侧栏 -->
            <div id="leftsidebar"></div>

            <!-- 表格内容 -->
            <div class="dept_info col-sm-10">
                <div class="panel panel-success">
                    <!-- 路径导航 -->
                    <div>
                        <ol class="breadcrumb">
                            <li><a href="#">用户帖管理</a></li>
                            <li class="active">审批举报</li>
                        </ol>
                    </div>
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>帖子ID</th>
                            <th>举报内容</th>
                            <th>举报人</th>
                            <th>举报时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--<c:forEach items="${reportMsgs.list}" var="report">-->
                        <tr v-for="report in reportList">
                            <td width="10%">{{report.articleid}}</td>
                            <td width="50%" class="line-limit-length">{{report.reportcontent}}</td>
                            <td width="10%">
                                {{report.reportusername}}
                            </td>
                            <td width="10%" class="line-limit-length">{{report.reporttime}}</td>
                            <td width="20%">
                                <a href="#" @click="showArticle(report.articleid)" role="button"
                                   class="btn btn-primary">相关帖子</a>
                                <a href="javascript:void(0);" @click="isReport(report.articleid,1)" role="button"
                                   class="btn btn-danger">屏蔽</a>
                                <a href="javascript:void(0);" @click="isReport(report.articleid,0)" role="button"
                                   class="btn btn-info">驳回</a>
                            </td>
                        </tr>
                        <!--</c:forEach>-->
                        </tbody>
                    </table>


                </div>
            </div><!-- /.dept_info -->
            <!-- 尾部-->
            <div id="footer"></div>
        </div><!-- /.hrms_dept_body -->

    </div><!-- /.hrms_dept_container -->
</div>
<!--<%&#45;&#45;<%@ include file="ArticleAdd.jsp"%>&#45;&#45;%>-->
<!--引入-->
<!--<%&#45;&#45;<%@ include file="ArticleUpdate.jsp"%>&#45;&#45;%>-->
</body>
<script>
    function searchReport(pn) {
        location.href = "/report/findByPage.do?pn=" + pn
    }

    function showArticle(id) {
        $.ajax({
            url: '/article/findById.do?id=' + id,
            type: 'get',
            success: function (res) {
                $("#detail_title").val(res.title);
                $("#detail_content").val(res.content);
                $("#article_detail").modal();
            }
        })
    }

</script>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    new Vue({

        el: "#app",
        data() {
            return {
                reportList: [],
                message: '',
                article: {}
            }
        },
        created() {
            this.findReportList();
        },
        methods: {
            findReportList() {
                axios.get(`/report/findAllReport.do`).then(response => {
                    this.reportList = response.data;
                })
            },

            isReport(articleid, reportStatus) {
                axios.get(`/report/updateReportStatus.do?articleid=${articleid}&reportStatus=${reportStatus}`).then(response => {
                    this.message = response.data;
                })
            },
            showArticle(articleid) {
                axios.get(`report/findById.do?articleid=${articleid}`).then(response => {
                    this.article = response.data;
                })
            }
        }

    })


</script>
</html>
